<template>
    <div class="articles" v-set-title="title" >
   <!--     <div class="head ">
           <div class="headtop">
             <div class="headbox">
             <div class="icon" @click="goreturn"><i class="iconfont icon-fanhui"></i></div>
              <p>文章详情</p>
              </div>
           </div>
       </div> -->
       <div class="invalid" v-if="kongbai==false">文章已被删除。。。</div>
       <div v-if="kongbai!=false">
            <div class="bdsharebuttonbox">
               <a href="#" class="bds_more" data-cmd="more"></a>
               <a href="#" class="bds_qzone" data-cmd="qzone"></a>
               <a href="#" class="bds_tsina" data-cmd="tsina"></a>
          <!-- <a href="#" class="bds_tqq" data-cmd="tqq"></a> -->
               <a href="#" class="bds_renren" data-cmd="renren"></a>
              <a href="#" class="bds_weixin" data-cmd="weixin"></a>
           </div>

       <div class="box" v-if="showhide==true">
       <div id='wx_pic' style='width:0px; height:0px; overflow:hidden'>
          <img src='../../assets/image/pic300.jpg' />
       </div>
       	  <div class="boxtitle">
       	  	<p>{{data.title}}</p>
       	  </div>
       	  <div class="boxname clearfix">
       	  	  <div class="boxnamel">
       	  	  	<!-- <img src="../../assets/image/common/default_photo.png"/> -->
                <img :src="picHead + data.headImg" :onerror="errorImg01"/>
       	  	  </div>
       	  	  <div class="boxnamecon">
       	  	  	  <p class="boxnamecont">{{data.userName}} </p>
       	  	  	  <p class="boxnameconb">{{data.updateTime | stampFormate2}}</p>
       	  	  </div>
       	  	  <div class="boxnamer"><p v-if="data.pv!=null">{{data.pv}} 阅读</p>
               <p v-if="data.pv==null">0 阅读</p></div>
       	  </div>
          <video controls v-if="data.video!='' && data.video!=null" class="v_video">
               <source :src="data.video" type="video/mp4">
             </video>
           <div class="v_video" v-show="show!=''"><img :src="show"/></div>
             
       	  <div class="v_html" v-html="data.content">
       	  </div>

          <!-- 点赞 -->
       	  <div class="fabulous" v-if="fabulous==true">
              <p class="fabulousicon"><i class="iconfont icon-zan"></i></p>
              <p class="fabulousp" v-if="fabulousdata!=null">{{fabulousdata}}</p>
              <p class="fabulousp" v-if="fabulousdata==null">0</p>
       	  </div>
          <div class="fabulous2" v-if="fabulous==false" @click="fabulousdian">
              <p class="fabulousicon"><i class="iconfont icon-zan"></i></p>
              <p class="fabulousp" v-if="fabulousdata!=null">{{fabulousdata}}</p>
              <p class="fabulousp" v-if="fabulousdata==null">0</p>
          </div>
       </div>
       </div>
    </div>
</template>

<script>
    import {commonService} from '../../service/commonService'
    export default {
        data () {
            return {
                title: '',
                data:'',
                kongbai:true,
                fabulous:false,
                fabulousdata:'',
                articles:[],
                errorImg01:'this.src="' + require('../../assets/image/common/default_photo.png') + '"',
                showhide:false,
                // syt:'',
                list:'',
                show:'',
            }
        },
     // asyncData({store,route}) {
     //        return Promise.all([
     //            commonService.getKaptchas().then(res=>{
     //                store.state.homeStore.list=res;
     //            }),
               
     //        ])
     //    },
       computed: {
       
            picHead() {
                return this.$store.state.picHead
            },
        },
 
        mounted: function() {

          // window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":null}};
            // with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
            let _this=this
               this.$nextTick(function () {
            window._bd_share_config ={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"../../assets/image/pic300.jpg","bdStyle":"0","bdSize":"16",onAfterClick:_this.syt},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":null}};
            const s = document.createElement('script');
            s.type = 'text/javascript';
            s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
            document.body.appendChild(s);
        })
   
          this.getFootPrint()
          this.getChannelsId()
          this.fabulousshow()
          
          // this.onAfterClick()
          

        },
        methods: {
          // 分享+1
           syt:function(){
              let that=this
              let id=that.$route.query.id
               commonService.putArticleforward(id).then(function (res) {
                  if(res.data.code==200){
                       
                  }
        });
           },
          getFootPrint(){
                let that = this;
                let cookiesId  = window.localStorage.getItem('cookiesId');
                if(cookiesId  == undefined || cookiesId  == '' || cookiesId  == null){
                    cookiesId  = Date.parse(new Date());
                    cookiesId  = "zstat" + "-" + cookiesId  + "-" + Math.round(Math.random() * 3000000000);
                    let arr=[1]
                    window.localStorage.setItem('cookiesId',cookiesId );
                    window.localStorage.setItem('articles',JSON.stringify(arr));
                    cookiesId=''
                }
                // commonService.getFootPrint({pageNo:1,pageSize:50,cookiesId:cookiesId }).then(function(res){
                //     if(res.data.code === 200){
                //         that.footPrint=res.data.datas.datas
                //     }
                // })
            },
          //返回上一页
          goreturn:function(){
            window.history.go(-1);
          },
          // 点赞
          fabulousdian:function(){
             this.fabulous=true
            this.articles.push(this.data.articleId)
             window.localStorage.setItem('articles',JSON.stringify(this.articles));
             this.putArticleid()
          },
          // 是否点赞
          fabulousshow:function(){
              let that=this
              let id=that.$route.query.id
              that.articles = JSON.parse(window.localStorage.getItem('articles'));
              for(let i=0;i<that.articles.length;i++){
            
                  if(that.articles[i]== id){
                        that.fabulous=true 
                  }
              }
              // if(fabulous == 'true'){
                    
              // }
          },
          // 我的推广详情
          getChannelsId:function(){
            let that=this
             let id=that.$route.query.utm_source
             if(id!='' && id!=null&& id!='undefined'){
              commonService.getChannelsId(id).then(function(res){
                    if(res.data.code == 200){
                        that.list=res.data.datas
                  
                        if(that.list.status==7){
                             that.kongbai=false
                        }else{
                           that.getArticleid()
                           that.jiantin()
                        }
             
                    }
              })
             }else{
                 that.getArticleid()
                 that.jiantin()
             }
              

          },
          
            // 记录
          putArticlepvid:function(){
            let that=this
            let id=that.$route.query.id
              commonService.putArticlepvid(id).then(function(res){

              })
          },

           // 获取文章详情
          getArticleid:function(){
            let that=this
            let id=that.$route.query.id
              commonService.getArticleid(id,{type:1}).then(function(res){
                   // that.pageNo++
                    if(res.data.code == 200){
                      that.data=res.data.datas
                      that.title=that.data.title
                      that.fabulousdata=that.data.thumbNum
                     if(that.data.video==''||that.data.video==null){
                        if(res.data.datas.cover!=''&&res.data.datas.cover!=null){
                           that.show=that.$store.state.picHead + res.data.datas.cover
                        }
                     }
                      that.putArticlepvid()
                      that.showhide=true
                    }
              })
          },
           // 点赞
          putArticleid:function(){
            let that=this
              commonService.putArticleid(that.data.articleId).then(function(res){
                   // that.pageNo++
                    that.getArticleid()
                    // if(res.data.code == 200){
                    //   that.data=res.data.datas
                 
                    // }
              })

          },

          // 监听
          jiantin:function(){
                var params = {};

    //Document对象数据
    if (document) {
        params.domain = document.domain || '';
        params.url = document.URL || '';
        params.title = document.title || '';
        params.referrer = document.referrer || '';
        //分析url存储文章类型和文章ID
        var url = params.url;
        var refer = params.referrer;
    if (url != undefined && url != null && url != "") {
         
   var theRequest = new Object();  
   if (url.indexOf("?") != -1) {  
      var str = url.substr(url.indexOf("?")+1);  
          str=str.split("#")[0]
      let strs = str.split("&");  
      for(var i = 0; i < strs.length; i ++) {  
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
      }  
   }  
           if(theRequest.utm_source=='' || theRequest.utm_source==undefined || theRequest.utm_source==null){
                theRequest.utm_source=''
                // return false
           }
            if(theRequest.id=='' || theRequest.id==undefined || theRequest.id==null){
                theRequest.id=''
           }
            params.type = 1;
            params.typeId = theRequest.id;
            params.utmSource = theRequest.utm_source
            var fromJson = {
                "from=singlemessage": "微信好友分享",
                "from=timeline": "朋友圈分享",
                "from=groupmessage": "微信群分享",
                "mp.weixinbridge.com":"微信公众号"
            };
            for (var json in fromJson) {
                if (url.indexOf(json) > 0) {
                    params.source = fromJson[json];
                    break;
                }
            }
            if (params.source == undefined && refer != undefined && refer != null && refer != "") {
                if (refer.indexOf("baidu.com") > 0) {
                    params.source = "百度搜索";
                } else {
                  // var urlArr = url.split("/");
                    if (urlArr.length >= 3) {
                        var urlDomain = urlArr[2];
                        var referArr = refer.split("/");
                        if (referArr.length >= 3) {
                            if (referArr[2]==urlDomain) { //url的domain和refer的domian相同
                                params.source = "直接访问";
                            }
                        }
                    }
                }
            }else if(params.source == undefined && refer == ""){
                params.source = "直接访问";
            }
            if(params.source == undefined && refer == ""){
                params.source = "直接访问";
            }
            if(params.source == undefined && refer != null && refer !=""){
                if (refer.indexOf("mp.weixinbridge.com")>0){
                    params.source="微信公众号";
                }
            }

            //给pageurl赋值
            if (url.indexOf("?") > 0) {
                params.pageurl = url.split("?")[0];
            } else {
                params.pageurl = url;
            }
        }
    }
    //Window对象数据
    if (window && window.screen) {
        var sh = window.screen.height || 0;
        var sw = window.screen.width || 0;
        params.res = sw + "*" + sh;
        params.cd = window.screen.colorDepth || 0;
    }
    //navigator对象数据
    if (navigator) {
        params.lang = navigator.language || '';
        params.platform = navigator.platform || '';

        var ua = navigator.userAgent;
        if (ua.length > 250) {
            ua = ua.substring(0, 250);
        }
        params.brower = this.analyzeBrowser(ua);
    }

    params.cookieid = this.getStatId("zstatId");

    //var phone = document.getElementById("sessionPhone");
    //if (phone) {
    //    params.phone = phone.value;
    //} else {
    //    params.phone = "phone";
    //}
         
    // if (remote_ip_info.country) {
    //     params.country = remote_ip_info.country;
    //     params.province = remote_ip_info.province;
    //     params.city = remote_ip_info.city;
    //     params.isp = remote_ip_info.isp;
    // }
       this.getIp()
        // params.country = window.localStorage.getItem("country");
        // params.province = window.localStorage.getItem("province");
        // params.city = window.localStorage.getItem("city");
        // params.isp = window.localStorage.getItem("isp");
   
     /**
    * 获取ip
    */
  
   // console.log(remote_ip_info)
    //解析_maq配置
    if (_maq) {
        for (var i in _maq) {
            switch (_maq[i][0]) {
                case 'web_id':
                    params.webid = _maq[i][1];
                    break;
                default:
                    break;
            }
        }
    }
    //拼接参数串
    var args = '';
    for (var i in params) {
        if (args != '') {
            args += '&';
        }
        args += i + '=' + encodeURIComponent(params[i]);
    }
   // console.log(args)
    //通过Image对象请求后端脚本
    var img = new Image(1, 1);
    img.src = 'http://tj.welltour.cn/welltour.gif?' + args;
   },

    analyzeBrowser:function(userAgent) {
    var browserKeyArr = [{
        name: '遨游',
        agentKey: 'Maxthon'
    }, {
        name: '微信',
        agentKey: 'MicroMessenger'
    },{
        name: '欧朋',
        agentKey: 'Opera'
    }, {//需要放谷歌和Safari之前
        name: 'QQ浏览器',
        agentKey: 'QQBrowser'
    }, {//安卓 QQ浏览器
        name: 'QQ',
        agentKey: 'MQQBrowser'
    }, {
        name: 'QQ',
        agentKey: 'TencentTraveler'
    }, {
        name: '火狐',
        agentKey: 'Firefox'
    }, {
        name: '谷歌',
        agentKey: 'Chrome'
    }, {
        name: '360',
        agentKey: '360SE'
    }, {
        name: '360极速',
        agentKey: '360EE'
    }, {
        name: 'UC',
        agentKey: 'UCWEB'
    }, {
        name: 'UC',
        agentKey: 'UBrowser'
    }, {
        name: '搜狗',
        agentKey: 'MetaSr'
    }, {
        name: 'Navigator',
        agentKey: 'Navigator'
    }, {
        name: '猎豹',
        agentKey: 'LBBROWSER'
    }, {
        name: '世界之窗',
        agentKey: 'TheWorld'
    }, {
        name: '淘宝',
        agentKey: 'TaoBrowser'
    }, {//放最后
        name: 'Safari',
        agentKey: 'Safari'
    }, {
        name: 'IE',
        agentKey: 'MSIE'
    }, {//IE内核
        name: 'IE',
        agentKey: 'Trident'
    }, {
        name: '其他',
        agentKey: ''
    }];
    for (var i = 0, length = browserKeyArr.length; i < length; i++) {
        var pattern = new RegExp(browserKeyArr[i].agentKey);
        if (pattern.test(userAgent)) {
            return browserKeyArr[i].name;
        }
    }
},
getStatId:function(statIdName) {
    var statId = this.getCookie(statIdName);
    if (statId != null && statId.length > 0) {
        return statId;
    } else {
        this.setStatId(statIdName);
        return this.getStatId(statIdName);
    }
},
 getIp:function() {
                $.post("http://api.welltour.cn/ip/ip",function (data) {
                    window.localStorage.setItem("ip",data.datas);
                })
                // $.get("http://ip.taobao.com/service/getIpInfo.php?ip="+window.localStorage.getItem("ip"),function (result){
                //   // console.log(result)
                //    window.localStorage.setItem("country",result.data.county);
                //     window.localStorage.setItem("province",result.data.region);
                //     window.localStorage.setItem("city",result.data.city);
                //     window.localStorage.setItem("isp",result.data.isp);
                // },"json")
     },
getCookie:function(c_name) {
    if (document.cookie.length > 0) {
       let c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
           let c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
},
setStatId:function(statIdName) {
    var cookieId = this.genStatId();
    this.setCookie(statIdName, cookieId, 365);
},
genStatId() {
    var cookieId = this.getTimestamp();
    cookieId = "zstat" + "-" + cookieId + "-" + Math.round(Math.random() * 3000000000);
    return cookieId;
},
getTimestamp() {
    var timestamp = Date.parse(new Date());
    return timestamp;
},
setCookie(c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
},
      
    
          },

   
    }
</script>
<style lang="less">
    /*rem等基本设置都放在base中，不写多个*/
    @import url('../../assets/css/base.less');
    .articles{
        width: 100%;
        .invalid{
            font-size: 20px;
            text-align: center;
            margin-top: 80px;
        }
        .bdshare-button-style0-16{
           width: 40px;
           position: fixed;
           left: 40px;
           top: 20px;
        }
        .head{
            height: 50px;
            width: 100%;
            .headtop{
                position: fixed;
                left: 0;
                top:0;
                z-index: 99;
                height: 50px;
                width: 100%;
                background: #FFFFFF;
                box-shadow: inset 0 -1px 0 0 rgba(221,221,221,0.50);
                
                .headbox{
                  height: 50px;
                  position: relative;
                  .icon{
                   position: absolute;
                   left: 15px;
                   top:0; 
                    i{font-size: 24px;line-height: 50px;color:#333;}
                      }
                
                p{ font-size: 18px;line-height: 50px;text-align: center;color: #333;}
                }
                }
           }
       
         .box{
         	    width: 680px;
              border: 1px solid #EFF2F7;
              box-shadow: 0 0 12px 0 rgba(132,146,166,0.10);
              padding: 0 82px;
              margin: 24px auto;
         	.boxtitle{
         		 margin-top: 40px;
         		 p{
         		 	color: #1f2d3d;
              font-size: 24px;
               line-height: 24px;
               margin-top: 40px;
         		 }
         	}
         	.boxname{
         		margin: 24px 0 15px;
         		position: relative;
         		.boxnamel{
         			float: left;
              display: none;
         			width: 36px;
         			height: 36px;
              border-radius: 50%;
              overflow: hidden;
         			img{
         				width: 40px;
         				height: 40px;
                margin: -2px 0 0 -2px;
         			}

         		}
         		.boxnamecon{
         			float: left;
         			// margin-left: 10px;
         			.boxnamecont{
         				color: #333;
         				font-size: 13px;
         				line-height: 18px;
         			}
         			.boxnameconb{
         				color: #bbb;
         				font-size: 12px;
         				line-height: 18px;
         			}

         		}
         		.boxnamer{
         			position: absolute;
         			right: 0;
         			bottom: 0;
         			p{
         				font-size: 12px;
         				line-height: 18px;
         				color: #999;
         			}
         		}

         	}
          .v_video{
             width: 100%;
             // margin-left: 10%;
             margin-bottom: 20px;
             img{
                 width: 100%;
             }
          }
         	.v_html{
         		// p{
         		// 	margin-bottom: 20px;
         		// 	font-size: 18px;
         		// 	line-height: 32px;
         		// 	color: #333;
         		// }
            img{
                max-width: 100%;
                height: auto!important;
            }
         	}
         	.fabulous{
         		width: 60px;
         		height: 42px;
         		border-radius: 94px;
         		background: rgba(241, 151, 0, 0.2);
         		margin: 30px auto 20px;
         		.fabulousicon{
         			 // line-height: 24px;
         			 text-align: center;
         			 margin-top: 2px;
         			 i{
         			 	font-size: 24px;
         			 	color:#F29700;
         			 	// line-height: 24px;
         			 }
         		}
         		.fabulousp{
         			 // line-height: 18px;
         			 color: #F29700;
         			 font-size: 12px;
         			 text-align: center;
         		}


         	}
          .fabulous2{
            width: 60px;
            height: 42px;
            border-radius: 94px;
            background: #eee;
            margin: 0 auto 20px;
            .fabulousicon{
               // line-height: 24px;
               text-align: center;
               margin-top: 2px;
               i{
                font-size: 24px;
                color:#999;
                // line-height: 24px;
               }
            }
            .fabulousp{
               // line-height: 18px;
               color: #999;
               font-size: 12px;
               text-align: center;
            }


          }

         }

      


    }
</style>

